<template>
	<view class="container">
		<!-- 置顶区域（分类导航+搜索框） -->
		<view class="sticky-header">
			<!-- 一级分类 -->
			<scroll-view scroll-x class="scroll-x" :show-scrollbar="false" enhanced>
				<view class="category-row">
					<view v-for="parent in categories" :key="parent.id" class="parent-item"
						:class="{ active: activeParentId === parent.id }" @click="selectParent(parent.id,parent)">
						<image :src="parent.iconCover.url" class="cat-img" />
						<text>{{ parent.name }}</text>
					</view>
				</view>
			</scroll-view>

			<!-- 二级分类 -->
			<scroll-view scroll-x class="scroll-a" :show-scrollbar="false" v-if="currentChildren.length > 0">
				<view class="subcategory-rowa">
					<view v-for="(itema, index) in currentChildren" :key="index" class="child-item"
						:class="{ active: activeChildId === itema.id }" @click="zitype(itema)">
						{{ itema.name }}
					</view>
				</view>
			</scroll-view>

			<!-- 搜索框 -->
			<view class="search-box">
				<input type="text" v-model="eachvale" placeholder="请输入商品名称" @confirm="eachVal" />
				<button @click="eachVal">搜索</button>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-container">
			<view class="product-list" v-if="!loading">
				<view class="product-item" v-for="product in products" :key="product.id" @click="tiaozhuan(product)">
					<image :src="product.coverList[0].url" mode="aspectFill" class="product-img" />
					<view class="product-name">{{ product.name }}</view>
				</view>
			</view>
			<view class="empty-state" v-if="loading">
				<text class="empty-text">暂无商品</text>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '../../api/Channel.js'
	import request from '../../api/index.js'
	import suffixAddress from '../../api/suffixAddress.js'

	export default {
		data() {
			return {
				activeParentId: 1,
				activeChildId: 11,
				categories: [],
				products: [],
				pageNum: 1,
				pageSize: 10,
				loading: false,
				typeId: '',
				typeSelect: false,
				eachvale: '',
				sousou: true
			};
		},
		computed: {
			currentChildren() {
				const parent = this.categories.find(cat => cat.id === this.activeParentId);
				return parent?.children || [];
			}
		},
		onLoad() {
			this.typearr();
		},
		onReachBottom() {
			this.pageNum++;
			this.typeSelect = false;
			this.commodities();
		},
		methods: {
			async typearr() {
				const res = await request({
					url: api.ctrl + suffixAddress.add().commodities
				});
				this.categories = res.data;
				if (res.data.length > 0) {
					this.selectParent(res.data[0].id, res.data[0]);
				}
			},
			selectParent(id, item) {
				this.activeParentId = id;
				this.activeChildId = item.children?.[0]?.id || 11;
				this.pageNum = 1;
				this.typeId = item.id;
				this.typeSelect = true;
				this.eachvale = '';
				this.commodities();
			},
			eachVal() {
				if (!this.eachvale.trim()) {
					uni.showToast({
						title: '搜索内容不能为空',
						icon: 'none'
					});
					return;
				}
				this.pageNum = 1;
				this.typeSelect = true;
				this.commodities('0');
			},
			async commodities(select) {
				if (select === '0') this.typeId = '';

				const res = await request({
					url: api.ctrl + suffixAddress.add().type,
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize,
						categoryId: this.typeId,
						name: this.eachvale
					}
				});

				if (this.typeSelect) {
					this.products = res.data.list || [];
				} else {
					this.products = [...this.products, ...(res.data.list || [])];
				}

				this.loading = this.products.length === 0;
			},
			zitype(item) {
				this.eachvale = '';
				this.pageNum = 1;
				this.activeChildId = item.id;
				this.typeId = item.id;
				this.typeSelect = true;
				this.commodities();
			},
			tiaozhuan(product) {
				uni.navigateTo({
					url: '/pages/jiemxiajia/jiemxiajia?data=' + encodeURIComponent(JSON.stringify(product))
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		position: relative;
		
		/* 根据置顶区域高度调整 */
		background-color: #f5f5f5;
		min-height: 100vh;
		box-sizing: border-box;
	}

	/* 置顶区域样式 */
	.sticky-header {
		position: sticky;
		top: 0;
		left: 0;
		right: 0;
		z-index: 999;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
	}

	/* 分类导航样式 */
	.scroll-x {
		white-space: nowrap;
		height: 200rpx;
		background-color: #f8f8f8;
	}

	.category-row {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.parent-item {
		display: inline-flex;
		flex-direction: column;
		align-items: center;
		margin: 0 40rpx;
		color: #666;
		font-size: 28rpx;
		position: relative;
	}

	.parent-item.active {
		color: #e68300;
		transform: scale(1.1);
	}

	.parent-item.active::after {
		content: '';
		display: block;
		width: 60rpx;
		height: 6rpx;
		background: #e68300;
		border-radius: 3rpx;
		position: absolute;
		bottom: -10rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.cat-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-bottom: 15rpx;
		object-fit: cover;
		box-shadow: 0 4rpx 12rpx rgba(230, 131, 0, 0.2);
	}

	/* 二级分类 */
	.scroll-a {
		white-space: nowrap;
		margin: 20rpx 0;
	}

	.subcategory-rowa {
		display: flex;
		align-items: center;
		padding: 0 20rpx;
	}

	.child-item {
		padding: 16rpx 40rpx;
		margin: 0 20rpx;
		border-radius: 50rpx;
		background: #f5f5f5;
		font-size: 28rpx;
		color: #555;
	}

	.child-item.active {
		background: linear-gradient(135deg, #e68300, #ff9f40);
		color: #fff;
		box-shadow: 0 4rpx 16rpx rgba(230, 131, 0, 0.3);
	}

	/* 搜索框样式 */
	.search-box {
		display: flex;
		padding: 20rpx;
		background-color: #fff;
	}

	.search-box input {
		flex: 1;
		height: 70rpx;
		padding: 0 20rpx;
		background-color: #f5f5f5;
		border-radius: 35rpx;
		margin-right: 20rpx;
	}

	.search-box button {
		width: 120rpx;
		height: 70rpx;
		line-height: 70rpx;
		background-color: #e68300;
		color: white;
		border-radius: 35rpx;
		font-size: 28rpx;
	}

	/* 商品列表 */
	.product-container {
		padding: 20rpx;
		margin-top: 10rpx;
	}

	.product-list {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	.product-item {
		width: 48%;
		margin-bottom: 20rpx;
		background: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
	}

	.product-img {
		width: 100%;
		height: 320rpx;
	}

	.product-name {
		padding: 20rpx;
		font-size: 28rpx;
		color: #666;
		text-align: center;
	}

	/* 空状态 */
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 60vh;
		color: #999;
	}
</style>